<template>
  <div class="goods-card-container" :style="styleObj">
    <!-- 完全自定义 -->
    <slot name="fullyCustom"></slot>
    <a class="goods-card" v-if="!isFullyCustom">
      <img :src="imgInfo.imgSrc" :style="{'width':imgInfo.width, 'height':imgInfo.height, 
      'margin-top':imgInfo.marginTop, 'object-fit':imgInfo.fit}"/>
      <b class="first-tag" v-if="goodsInfo.firstTag"
      :style="goodsInfo.firstTagStyle">{{goodsInfo.firstTag}}</b>
      <h1 :style="goodsInfo.titleStyle">
        <p class="tips-tag" v-if="goodsInfo.tipsTag">
          {{goodsInfo.tipsTag}}
        </p>
        <span :style="goodsInfo.titleSpanStyle">{{goodsInfo.title}}</span>
      </h1>
      <p class="desc" v-if="goodsInfo.desc" :style="goodsInfo.descStyle">{{goodsInfo.desc}}</p>
      <p class="price" v-if="goodsInfo.price">
        <span>¥{{goodsInfo.price}}</span>
        <span v-if="goodsInfo.oldPrice" class="oldprice">{{goodsInfo.oldPrice}}</span>
      </p>
      <ul class="tags" v-if="goodsInfo.tags" :style="goodsInfo.tagsStyle">
        <li v-for="item in goodsInfo.tags" :key="item">{{item}}</li>
      </ul>
    </a>
  </div>
</template>

<script>
import { onMounted, useSlots, ref } from 'vue'

export default {
  nmae: 'VmGoodsCard',
  props: {
    width: {
        type: String,
        default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    backgroundColor: {
      type: String,
      default: '#FFF'
    },
    hrefUrl: {
      type: String,
      default: ''
    },
    imgInfo: {
      type: Object,
      default: () => {
        return {
          imgSrc: '',
          marginTop: '',
          fit: '',
          width: '',
          height: ''
        }
      }
    },
    goodsInfo: {
      type: Object,
      default: () => {
        return {
          title: '',
          titleStyle: {},
          titleSpanStyle: {},
          desc: '',
          descStyle: {},
          price: '',
          priceStyle: '',
          oldPrice: '',
          tags: [],
          tagsStyle: '',
          firstTag: '',
          firstTagStyle: {},
          tipsTag: ''
        }
      }
    }
  },
  setup (props) {
    const styleObj = {
      width: props.width,
      height: props.height,
      backgroundColor: props.backgroundColor
    }
  
    const slots = useSlots()
    const isFullyCustom = ref(false)
    onMounted(() => {
      // 判断是否完全自定义
      if(slots?.fullyCustom) isFullyCustom.value = true
    })

    return { styleObj, isFullyCustom }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/goods-card.scss";

.goods-card-container {
  position: relative;
  margin-top: 15px;
  .goods-card {
    h1 {
      align-items: stretch;
      margin-top: 14%;
      color: #000;
      font-weight: 400;
      line-height: 19px;
      margin-bottom: 5px;
      font-size: 14px;
      display: flex;
      max-width: 90%;
      flex-direction: row;
      word-break: break-all;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      span {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .tags {
      margin-top: 8px;
      display: flex;
      height: 16px;
      flex-direction: row;
      padding-right: 0.5px;
      -webkit-box-pack: center;
      justify-content: center;
      align-items: stretch;
      flex-wrap: wrap;
      overflow: hidden;
      li {
        max-width: 100%;
        height: 16px;
        padding:0 4px;
        margin-left: 4px;
        vertical-align: middle;
        color: rgb(207, 10, 44);
        font-weight: 400;
        line-height: 16px;
        text-align: center;
        font-size: 12px;
        border: 1px solid rgba(207, 10, 44, 0.4);
        border-radius: 4px;
        overflow: hidden;
        text-overflow: hidden;
        white-space: nowrap;
      }
    }
  }
}
</style>>
